// TODO: 荣誉证书
import React, { VFC, useState, useEffect} from "react"
import {Modal, Form, Input, Button, message,Upload, Space, Spin   } from 'antd';
import { LoadingOutlined } from '@ant-design/icons';
import { useHistory } from "react-router-dom";;

import { uploadPic, getTeamCertificateList, getTeamFinance, saveTeamCertificate} from '@services/index';
import { checkUploadFile, pick} from '@tools/utils'
import { FILe_URL } from "@tools/config";
import NoInfo from '@components/noInfo';

const FormItem = Form.Item;
const { TextArea } = Input;

const Certificate:VFC<any> = props => {
    const {teamId,projectId, isVisible, onCancel} = props;
    const {location} = useHistory() as any
    const [formInfo, setFormInfo] = useState<any>({});
    const [totalMoney, setTotalMoney] = useState<any>({});
    const [teamProjectMoney, setTeamProjectMoney] = useState<any>({});
    const [isShow, setIsShow] = useState<boolean>(false);
    const [loading, setLoading] = useState<boolean>(false)
    useEffect(()=>{
        teamFinance()
        init()
    }, [])
    const init = () => {
        getTeamCertificateList({
            pageNum:1,
            pageSize:10,
            phaseId: location.state?.phaseId,
            teamId,
            projectId: projectId
        }).then(({status, data}) => {
            if(status === '0'){
                const _data = data?.list;
                let _isShow = _data.length>0?true:false;
                setIsShow(_isShow);
                setFormInfo(_data[0])
            }
        })
    }
    const teamFinance= () => {
        getTeamFinance({
            phaseId: location.state?.phaseId,
            teamId,
            projectId: projectId
        }).then(({status, data}) => {
            if(status === '0'){
                const {totalMoeny, teamProjectMoney} = data;
                setTotalMoney(totalMoeny)
                setTeamProjectMoney(teamProjectMoney)
            }
        })
    }

    // 图片上传前校验
    const beforeUpload = (file:any) => {
        if(checkUploadFile(file, 'image')){_uploadPic(file);}
    }
    // 上传图片
    const _uploadPic = async (e: string | Blob) => {
        setLoading(true)
        const formData = new FormData();
        formData.append("file", e);
        const params = {
            subject: 'sys',
            type: 'head',
            isNewFileName: 1
        };
        const { data, status } = await uploadPic(params, formData)
        if(status == '0'){
            const {fileName} = data;
            setFormInfo({
                ...formInfo,
                certificatePic: fileName
            })
            setLoading(false)
        }
    }
    // 修改输入框值
    const onChange = (e:any, type:string):void => {
        setFormInfo({
            ...formInfo,
            [type]: e?.target?e.target.value:e
        })
    }

    // 提交表单数据
    const submit = async (type: string) => {
        // const params = pick(formInfo, [
        //     "projectId",
        //     "phaseId",
        //     "teamId",
        //     "id",
        //     "certificatePic",
        //     "pass",
        // ]);
        const params = {
            phaseId: location.state?.phaseId,
            teamId: teamId,
            certificatePic: formInfo.certificatePic,
            projectId: projectId,
            // 0 未评论 1 通过 2 未通过
            pass: type=='Y' ? 1: 2
        };
        if(!params.certificatePic){
            message.error('请上传图片');
            return
        }
        const { status } = await saveTeamCertificate(params)
        if(status == '0'){
            message.success('提交成功');
            onCancel()
        }
    };
    const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />;
    return (
        <Modal title='证书颁发' visible={isVisible} onCancel={onCancel} footer={false}>
            <Form >
                <FormItem label="本次探测支出">
                    <span>{totalMoney.consume?totalMoney.consume / 10000 + 'w':0}</span>
                </FormItem>
                <FormItem label="本次收入">
                    <span>{totalMoney.income?totalMoney.income / 10000 + 'w':0}</span>
                </FormItem>
                <FormItem label="目前资金">
                    <span>{teamProjectMoney.balance?teamProjectMoney.balance / 10000 + 'w':0}</span>
                </FormItem>
                <FormItem label="上传证书">
                    <Upload name="certificatePic"
                    listType="picture-card"
                    className="avatar-uploader-pic"
                    showUploadList={false}
                    beforeUpload={beforeUpload}
                    customRequest={()=>false}>
                        {formInfo?.certificatePic?<img src={`${FILe_URL}${formInfo?.certificatePic}`} />:'+'}
                    </Upload>
                </FormItem>
                <Space size={20} style={{display: 'flex',justifyContent: 'center'}}>
                    <Button type="primary" onClick={()=>submit('Y')}>颁发</Button>
                </Space>
            </Form>
            {/* {!isShow&&<NoInfo />} */}
        </Modal>
    )
}
export default Certificate
